<template>
  <div>
    <div class="article-detail">
      <div class="base-info">
        <h1 class="article-title">{{ articleData.title }}</h1>
        <p class="post-time">{{ articleData.createTime | formatTime }}</p>
        <el-button type="text" class="coll-btn" @click="handleCollection">{{
          isCollection ? "取消收藏" : "加入收藏"
        }}</el-button>
      </div>
      <div class="cover">
        <img :src="get_image_url(articleData.cover)" />
      </div>
      <div class="content" v-html="articleData.details"></div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from "../../../components/Footer/Footer";
import axios from "axios";
const BASE_URL = "http://127.0.0.1:8886";
export default {
  name: "ArticleDetail",
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      articleData: {},
      isCollection: false
    };
  },
  activated() {
    this.getArticleData();
    this.flagCollection();
  },
  filters: {
    formatTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, " ");
    }
  },
  methods: {
    getArticleData() {
      axios({
        method: "GET",
        url: BASE_URL + "/article/getArticleByPage",
        params: {
          page: 1,
          pageSize: 1,
          articleId: this.id,
          flag: 1
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(re => {
        const {
          data: { data: result }
        } = re;
        this.articleData = result[0];
      });
    },
    flagCollection() {
      const token = window.localStorage.getItem("token");
      if (!token) {
        this.isCollection = false;
        return;
      }
      axios({
        method: "GET",
        url: BASE_URL + "/article/judgeCollection",
        params: {
          id: this.id,
          token
        }
      }).then(re => {
        const {
          data: { data: result }
        } = re;
        this.isCollection = !!result;
        console.log(this.isCollection);
      });
    },
    get_image_url(id) {
      return BASE_URL + "/images/small/" + id + ".jpg";
    },
    handleCollection() {
      const token = window.localStorage.getItem("token");
      if (!token) {
        this.$message.warning("还未登录，请登录后操作");
        return;
      }
      axios({
        method: "POST",
        url: BASE_URL + "/article/collectArticle",
        params: {
          id: this.id,
          token
        }
      }).then(re => {
        this.$message.success(this.isCollection ? "取消收藏成功" : "收藏成功");
        this.isCollection = !this.isCollection;
      });
    }
  },
  components: {
    Footer
  }
};
</script>

<style scoped>
.article-detail {
  margin: 40px 150px;
}
.base-info {
  text-align: center;
}
.post-time {
  color: #999;
  font-size: 14px;
  margin-bottom: 0;
}

.article-title {
  text-align: center;
}
.content {
  margin-top: 40px;
  line-height: 2;
  letter-spacing: 0.1em;
}
.cover {
  text-align: center;
}
.cover img {
  display: inline-block;
  max-width: 600px;
  max-height: 400px;
  object-fit: cover;
}
.coll-btn {
  color: red;
  outline: none;
}
.coll-btn:hover {
  color: rgba(255, 0, 0, 0.356);
}
</style>
